<template>
  <a-row :gutter="32">
    <slot></slot>
    <slot name="fold" v-if="show">
    </slot>
    <a-col :span="24" class="fold-button tc" v-if="$slots.fold">
      <a @click="onClick">
        {{ show ? '收起' : '详细参数' }}
        <a-icon :type="show ? 'up' : 'down'" />
      </a>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'FoldForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'visible',
    event: 'change'
  },
  data () {
    return {
      show: null
    }
  },
  created () {
    this.show = this.visible
  },
  watch: {
    visible () {
      this.show = this.visible
    }
  },
  methods: {
    onClick () {
      this.show = !this.show
      this.$emit('change', !this.visible)
    }
  }
}
</script>

<style lang="scss" scoped>
.fold-form-open {
  .fold-form-wrap {
    opacity: 1;
    height: auto;
  }
  .fold-button {
  }
}
.fold-form-wrap {
  opacity: 0;
  overflow: hidden;
  transition: 0.3s all;
  height: 0;
}
.fold-button {
  display: block;
  padding: 4px 0;
  background: linear-gradient(to bottom, transparent, #fff);
}
</style>
